<template>
    <div style="border: 1px solid red; height: 100%;position: relative">
        <h2>我是tableA组件,这个用户的权限是{{getType}}</h2>
        <el-table :data="currentData" border style="width: 100%">
            <el-table-column prop="s_id" label="学号"></el-table-column>
            <el-table-column prop="s_name" label="学生姓名"></el-table-column>
            <el-table-column prop="s_age" label="学生年龄"></el-table-column>
            <el-table-column prop="s_score1" label="成绩"></el-table-column>
            <el-table-column prop="s_sex" label="性别"></el-table-column>
            <el-table-column prop="c_name" label="班级"></el-table-column>
            <el-table-column width="180" label="操作">
                <template slot-scope="scope">
                    <el-button size="mini">编辑</el-button>
                    <el-button type="danger" size="mini">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div style="position: absolute;bottom: 15px;right: 15px">
            <el-pagination
                    hide-on-single-page
                    layout="prev,pager,next"
                    :total="pageNum"
                    :page-size="3"
                    :page-count="7"
                    :current-page="currentPage"
                    @current-change="changePage"
            ></el-pagination>
        </div>
    </div>
</template>

<script>
    import {mapActions,mapState,mapGetters} from 'vuex'
    export default {
        name: "TableA",
        computed:{
            ...mapGetters(['getType']),
            ...mapState({
                tableData:function (state) {
                    return state.tableStore.tableAData
                }
            }),
            currentData(){
                let kaishi = (this.currentPage -1) * 3
                let jieshu = (this.currentPage -1) * 3+3
                return this.tableData.slice(kaishi,jieshu)
            },
            pageNum(){
                return this.tableData.length
            }
        },
        data(){
            return{
                currentPage:1

            }
        },
        methods:{
            ...mapActions(['getStuData']),
            changePage(val){
                console.log(val)
                this.currentPage = val
            }
        },
        created() {
          this.getStuData()

        }
    }
</script>

<style scoped>

</style>